<template>
    <div class="my_content">
        <div class="colorFFF">
            <Tabs title="基础数据">
                <template #btn>
                    <div style="width: 10rem"></div>
                </template>
            </Tabs>
        </div>
        <div class="top_box">
            <div class="bar_left">
                <!-- <div id="echarts_1" style="width:100%;height: 100%;"></div> -->
                <div class="bar_box">
                    <el-progress type="circle" :percentage="data.basicData['personnelOnlineProporte']" :color="data.bar_color"
                                 :stroke-width="data.strokeWidth"></el-progress>
                    <div class="bar_circle">
                        <span class="bar_number">{{ data.basicData['personnelOnlineProporte'] }}</span>
                        <span class="bar_precentage">%</span>
                    </div>
                </div>
                <div class="bar_text">
                    <div class="bar_text_top">工作人员在线人数</div>
                    <div class="bar_text_bottom">
                        <div class="number">{{ data.basicData['personnelOnlineCount'] }}</div>
                        <div class="person">人</div>
                    </div>
                </div>
                <!-- </div>
            <div class="bar_right"> -->
                <div class="bar_box">
                    <el-progress type="circle" :percentage="data.basicData['ownerAppltProporte']" :color="data.bar_color"
                                 :stroke-width="data.strokeWidth"></el-progress>
                    <div class="bar_circle">
                        <span class="bar_number">{{ data.basicData['ownerAppltProporte'] }}</span>
                        <span class="bar_precentage">%</span>
                    </div>
                </div>
                <div class="bar_text">
                    <div class="bar_text_top">业主总数</div>
                    <div class="bar_text_bottom">
                        <div class="number">{{ data.basicData['owner'] }}</div>
                        <div class="person">人</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom_box">
            <div class="bottom_box_item bottom_box_item_1">
                <div class="item_title">工作人员总数(人)</div>
                <div class="item_text">{{ data.basicData['personnelCount'] }}</div>
            </div>
            <div class="bottom_box_item bottom_box_item_2">
                <div class="item_title">住户总数(人)</div>
                <div class="item_text">{{ data.basicData['resident'] }}</div>
            </div>
            <div class="bottom_box_item bottom_box_item_3">
                <div class="item_title">房屋总面积(㎡)</div>
                <div class="item_text">{{ data.basicData['area'] }}</div>
            </div>
            <div class="bottom_box_item bottom_box_item_4">
                <div class="item_title">楼栋总数(栋)</div>
                <div class="item_text">{{ data.basicData['building'] }}</div>
            </div>
            <div class="bottom_box_item bottom_box_item_5">
                <div class="item_title">房间总数(间)</div>
                <div class="item_text">{{ data.basicData['room'] }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Tabs from "./Tabs.vue"
import { ComputedRef, inject, onUnmounted, reactive } from "vue";
import * as api from "src/api/largeDataScreen";
const villageId = inject<ComputedRef<string>>('villageId')

const data = reactive({
    bar_color: '#FBE5BB',
    percentage_1: 96,
    percentage_2: 91.7,
    strokeWidth: 7,
    basicData: {
        personnelOnlineProporte: 0,  // 工作人员在线人数占比
        personnelOnlineCount: 0,     // 工作人员在线人数
        ownerAppltProporte: 0,       // 业主是否注册小程序占比
        owner: 0,                    // 业主数量
        personnelCount: 0,           // 工作人员总数
        resident: 0,                 // 住户数量
        area: 0,                     // 房屋总面积
        building: 0,                 // 楼栋总数
        room: 0,                     // 房间数量
    }
})
let timer = 0
if (villageId?.value) {
    getBasicData(villageId.value);
    timer = setInterval(() => {
        getBasicData(villageId.value);
    }, 20000);
}
onUnmounted(() => {
    clearInterval(timer)
})
function getBasicData(villageId: string) {
    api.getBasicData({ villageId: villageId }).then(res => {
        if (res.success == true) {
            data.basicData = {
                // personnelOnlineProporte: (res.data.personnelOnlineProporte == 100 ? 100 : Number(res.data.personnelOnlineProporte.substr(0, res.data.personnelOnlineProporte.length-1))) || 0,
                personnelOnlineProporte: (res.data.personnelOnlineProporte == 100 ? 100 : Number(res.data.personnelOnlineProporte)) || 0,
                personnelOnlineCount: res.data.personnelOnlineCount || 0,
                ownerAppltProporte: (res.data.ownerAppltProporte == 100 ? 100 : Number(res.data.ownerAppltProporte)) || 0,
                owner: res.data.owner || 0,
                personnelCount: res.data.personnelCount || 0,
                resident: res.data.resident || 0,
                area: res.data.area || 0,
                building: res.data.building || 0,
                room: res.data.room || 0,
            }
        }
    })
}
</script>

<style scoped  lang="scss">
.my_content {
    width: 100%;
    height: 100%;
    // border: 1px solid #ccc;
    // box-sizing: border-box;
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 25rem;
    color: rgba(251, 229, 187, 0.8);

    .top_box {
        margin-top: 0.625rem;
        height: 30%;
        // border: 1px solid #ccc;
        // box-sizing: border-box;
        display: flex;
        color: #FBE5BB;

        .bar_left,
        .bar_right {
            height: 100%;
            flex: 1.5;
            display: flex;

            .bar_box {
                flex: 1;
                // border: 1px solid #ccc;
                // box-sizing: border-box;
                position: relative;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .bar_circle {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translate(0, -50%);
                    width: 73%;
                    text-align: center;

                    .bar_number {
                        text-align: right;
                        font-size: 1.1rem;
                        font-weight: 600;
                        color: #FBE5BB;
                        text-shadow: 0px 0px 6px rgba(251, 229, 187, 0.4);
                    }

                    .bar_precentage {
                        font-size: 0.8rem;
                        font-weight: 500;
                        // margin-left: -0.2rem;
                    }
                }
            }

            .bar_text {
                flex: 1;
                // border: 1px solid #ccc;
                // box-sizing: border-box;
                display: flex;
                flex-direction: column;
                margin-left: 0.4rem;

                .bar_text_top {
                    flex: 1;
                    // border: 1px solid #ccc;
                    // box-sizing: border-box;
                    font-size: 0.875rem;
                    display: flex;
                    align-items: flex-end;
                }

                .bar_text_bottom {
                    flex: 1;
                    // border: 1px solid #ccc;
                    // box-sizing: border-box;
                    display: flex;
                    align-items: center;

                    .number {
                        font-weight: 600;
                        font-size: 1.2rem;
                        color: #FBE5BB;
                        text-shadow: 0px 0px 6px rgba(251, 229, 187, 0.4);
                    }

                    .person {
                        font-weight: 400;
                        margin-left: 0.5rem;
                        margin-top: 0.2rem;
                        font-size: 0.6rem;
                        // align-self: flex-start;
                    }
                }
            }
        }
    }

    .bottom_box {
        width: 100%;
        height: 48%;
        background: url("../assets/top_left_square.png") bottom/100% 50% no-repeat;
        display: flex;
        flex-direction: row;

        // border: 1px solid #ccc;
        // box-sizing: border-box;
        .bottom_box_item {
            height: 100%;
            flex: 1;
            // border: 1px solid #ccc;
            // box-sizing: border-box;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .item_title {
                flex: 0.8;
                font-size: 0.75rem;
            }

            .item_text {
                flex: 3;
                font-size: 1.1rem;
                font-weight: 600;
                color: #FBE5BB;
                text-shadow: 0px 0px 6px rgba(251, 229, 187, 0.4);
                // align-self: flex-start;
            }
        }

        .bottom_box_item_1 {
            // background: url("../../../images/uiImages/largeData/top_left_person.png") center/70% 75% no-repeat;
            background: url("../assets/top_left_person.png") center/74% 61% no-repeat;
        }

        .bottom_box_item_2 {
            background: url("../assets/top_left_household.png") center/74% 61% no-repeat;
        }

        .bottom_box_item_3 {
            background: url("../assets/top_left_house.png") center/74% 61% no-repeat;
        }

        .bottom_box_item_4 {
            background: url("../assets/top_left_building.png") center/74% 61% no-repeat;
        }

        .bottom_box_item_5 {
            background: url("../assets/top_left_room.png") center/74% 61% no-repeat;
        }
    }
}

:deep .bar_box .el-progress {
    // width: 100%;
    // height: 100%;
    width: 73%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: url("../../../images/uiImages/largeData/basic_bg_circle.png") center/contain no-repeat;
    background: url("../assets/basic_bg_circle.png") center/72% 80% no-repeat;

    .el-progress-circle {
        width: 90% !important;
        height: 90% !important;
        display: flex;
        align-items: center;

        .el-progress-circle__track {
            stroke: #292928;
        }
    }

    .el-progress__text {
        // color: #292928;
        font-weight: 600;
        display: none;
    }
}
</style>